home *** CD-ROM | disk | FTP | other *** search
/ MacWorld 1999 April / Macworld (1999-04).dmg / Shareware World / Comms & Internet / PageSpinner 2.1 / PageSpinner 2.1 68K / Examples / JavaScript / PopupMenu2 < prev    next >
Text File  |  1997-10-09  |  3KB  |  59 lines
  1. <HTML>
  2. <HEAD>
  3. <TITLE>Popup Menu v2</TITLE>
  4. </HEAD>
  5.  
  6. <BODY BGCOLOR=FFFFFF TEXT=000000>
  7. <H1>JavaScript Popup Menu v2</H1>
  8.  
  9. <B>This page contains popup menu used for automatically selecting a page or URL</B>
  10. <P>
  11. Please note that JavaScript is currently only available in Netscape Navigator 2.0 or later, and in Internet Explorer for MacOS version 3.0.1 or later. <FONT COLOR="931B15">Do not assume that all in your audience are using a JavaScript enabled browser.</FONT>
  12. <HR>
  13. Here is another example on how JavaScript can be used in a form with a popup menu that has links to other pages. This example does not require a special "Go" button, the actions takes place after a selection is made in the pop up menu.
  14. <P>
  15. <FORM>
  16. Select a Page: <SELECT NAME="menu" onChange="top.location.href = this.form.menu.options[this.form.menu.selectedIndex].value">
  17. <OPTION SELECTED VALUE="index.html">Contents 
  18. <OPTION VALUE="groucho.html">Groucho 
  19. <OPTION VALUE="harpo.html">Harpo 
  20. <OPTION VALUE="chico.html">Chico 
  21. <OPTION VALUE="zeppo.html">Zeppo 
  22. </SELECT>
  23. </FORM> 
  24.  
  25. <HR>
  26. NOTE: The pages may fail to load when using this example with Internet Explorer and the pages to be loaded are stored on your local disk. It should work correctly with pages stored on a Web-server though.
  27. <HR>
  28. <B>How to use</B>
  29. <BLOCKQUOTE>
  30. The source of the popup menu looks like this:
  31. <P>
  32. <PRE><FORM>
  33. <SELECT NAME="menu" onChange="top.location.href =
  34.  this.form.menu.options[this.form.menu.selectedIndex].value">
  35. <OPTION SELECTED VALUE="index.html">Contents 
  36. <OPTION VALUE="groucho.html">Groucho 
  37. <OPTION VALUE="harpo.html">Harpo 
  38. <OPTION VALUE="chico.html">Chico 
  39. <OPTION VALUE="zeppo.html">Zeppo 
  40. </SELECT>
  41. </FORM></PRE>
  42. <P>
  43. Change the links and text to be displayed in the menu by editing the lines containing the <CODE>OPTION</CODE> tags. Note that you can also use full URL's in the VALUE attribute.
  44. </BLOCKQUOTE>
  45. <HR>
  46. <P>
  47. <B>Programming notes</B>
  48. <BLOCKQUOTE>
  49. The actual JavaScript is in the selection list's onChange handler. The JavaScript array <CODE>this.form.menu.options</CODE> is an array of the option tags (with its contents)  in the form named "menu". To find which menu item that is selected we can use the property <CODE>this.form.menu.selectedIndex</CODE>, that holds the index of the selected item.
  50. <P>
  51. We then get the name of the page by accessing the value attribute of the selected  item in the array with the expression <CODE>this.form.menu.options[this.form.menu.selectedIndex].value</CODE>.
  52. <P>
  53. <CODE>top.location.href</CODE> is the address of the url to be displayed in the window. Since we set <CODE>top.location</CODE> to contain the new pages URL, the new page will be displayed in the entire window, even if our page is inside a frame.
  54. <P>
  55. If you want to change the contents inside a specific frame, you can try to replace <CODE>top</CODE> with the <TT>top.frames.<I>name_of_the_frame</I></TT>. For example, if the frame is named "contact" in the frame definition page, the frame's source can be accessed like this: <CODE>top.frames.contact.location.href</CODE>.
  56. </BLOCKQUOTE>
  57. </BODY>
  58. </HTML>
  59.